<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/8/14
  Time: 下午3:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">功能模块</h3>
            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 添加
                </button>
            </div>
        </div>

        <div class="homepage_module">
            <div class="panel panel-default homepage_module_item">
                <div class="panel-body">
                    <div>
                        <div id="uploader0" class="wu-example">
                            <!--用来存放文件信息-->
                            <div id="fileList" class="uploader-list"></div>
                            <div class="btns">
                                <div id="">选择文件</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default homepage_module_item">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div>

            <div class="panel panel-default homepage_module_item">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div>

            <div class="panel panel-default homepage_module_item">
                <div class="panel-body">
                    Basic panel example
                </div>
            </div>
        </div>
    </div>
    <script>
        var banners = [];
        function removeBannres($target) {
            for (var i = 0;i<banners.length;i++) {
                var hurl = $target.prev().attr("hurl");
                if (hurl == banners[i]) {
                    banners.splice(i,1);
                    console.log(banners.join(","));
                    break;
                }
            }
            $target.parent().remove();
        }
        jQuery(function() {
            var $ = jQuery,
                $list = $('#fileList'),

                ratio = window.devicePixelRatio || 1,
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio,

                uploader;

            uploader = WebUploader.create({

                auto: false,
                swf: '/ems/plugins/webuploader/Uploader.swf',
                server: '/ems/upload/keditorUpload',
                pick: '#filePicker',
                accept: {
                    title: 'Images',
                    extensions: 'jpg,jpeg,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                },
            });

            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                        '<span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                        '</div>'
                    ),
                    $img = $li.find('img');

                $list.append( $li );

                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>无法生成缩略图</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );

                $(".image-remove").on("click",function () {
                    removeBannres($(this))
                })

                var size = $("#fileList").children().length;
                var html = "";
                if (size <=1 ) {
                    html = '<div class="form-group"><label class="col-sm-3 control-label">跳转链接：</label><div class="col-sm-9"> <input type="text" required name="url" value="" class="form-control" placeholder="请填写第'+size+'张图片的跳转链接"> </div> </div>';
                } else {
                    html = '<div class="form-group"><label class="col-sm-3 control-label"></label><div class="col-sm-9"> <input type="text" required name="url" value="" class="form-control" placeholder="请填写第'+size+'张图片的跳转链接"> </div> </div>';
                }
                $(".ems_internal_form").append(html);

            });

            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress span');

                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
                }

                $percent.css( 'width', percentage * 100 + '%' );
            });

            uploader.on( 'uploadSuccess', function(file,resp) {
                $( '#'+file.id ).addClass('upload-state-done');
                banners.push(resp.url);
                var $li = $( '#'+file.id ),
                    $succeed = $li.find('div.success');

                if ( !$succeed.length ) {
                    $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
                }

                $li.find("img").attr("hurl",resp.url);
            });

            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传失败');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });

            $("#upBtn").on( 'click', function(event) {
                if ($("#fileList").children().length == 0) {
                    $.errorAlert("请选择图片上传");
                    return;
                }
                uploader.upload();
                return false;
            });
        });
    </script>
</body>
</html>
